{% extends 'base.html' %}
{% block header %}菜单管理{% endblock %}
{% block content %}
{% csrf_token %}
<div class="card shadow-sm rounded p-4 mb-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0">菜单列表</h4>
        <a href="/menu/create/" class="btn btn-success">新增菜单</a>
    </div>
    <div class="table-responsive">
        <table class="table table-bordered align-middle">
            <thead class="table-light">
                <tr>
                    <th width="30">拖拽</th>
                    <th>名称</th>
                    <th>图标</th>
                    <th>链接</th>
                    <th>父菜单</th>
                    <th>排序</th>
                    <th>权限</th>
                    <th>状态</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="sortable-menu">
                {% for menu in menus %}
                <tr class="sortable-item" data-id="{{ menu.id }}">
                    <td class="text-center"><i class="bi bi-grip-vertical" style="cursor: move;"></i></td>
                    <td>{{ menu.name }}</td>
                    <td>{% if menu.icon %}<i class="bi {{ menu.icon }} fs-4"></i>{% endif %}</td>
                    <td>{{ menu.url }}</td>
                    <td>{% if menu.parent %}{{ menu.parent.name }}{% endif %}</td>
                    <td>{{ menu.order }}</td>
                    <td>
                        <form method="post" action="/menu/update_permission/{{ menu.id }}/" style="display:inline;">
                            {% csrf_token %}
                            <select name="permission" class="form-select form-select-sm d-inline w-auto" onchange="this.form.submit()">
                                <option value="0" {% if menu.permission == 0 %}selected{% endif %}>全部</option>
                                <option value="1" {% if menu.permission == 1 %}selected{% endif %}>仅管理员</option>
                                <option value="2" {% if menu.permission == 2 %}selected{% endif %}>仅普通用户</option>
                                <option value="3" {% if menu.permission == 3 %}selected{% endif %}>仅配置用户</option>
                                <option value="4" {% if menu.permission == 4 %}selected{% endif %}>仅配置用户与管理员</option>
                                <option value="5" {% if menu.permission == 5 %}selected{% endif %}>仅管理员与普通用户</option>
                            </select>
                        </form>
                    </td>
                    <td>
                        <form method="post" action="/menu/update_status/{{ menu.id }}/" style="display:inline;">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-sm {% if menu.status %}btn-success{% else %}btn-secondary{% endif %}">
                                {% if menu.status %}显示{% else %}隐藏{% endif %}
                            </button>
                        </form>
                    </td>
                    <td>{{ menu.remark }}</td>
                    <td>
                        <a href="/menu/edit/{{ menu.id }}/" class="btn btn-sm btn-primary">编辑</a>
                        <a href="/menu/delete/{{ menu.id }}/" class="btn btn-sm btn-danger ms-1">删除</a>
                    </td>
                </tr>
                {% empty %}
                <tr><td colspan="10" class="text-center">暂无菜单信息</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- 引入 SortableJS -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var sortable = Sortable.create(document.getElementById('sortable-menu'), {
        handle: '.bi-grip-vertical',
        animation: 150,
        onEnd: function(evt) {
            // 获取新的排序
            var menuIds = [];
            var rows = document.querySelectorAll('#sortable-menu .sortable-item');
            rows.forEach(function(row, index) {
                menuIds.push({
                    id: row.getAttribute('data-id'),
                    order: index + 1
                });
            });
            
            // 发送AJAX请求更新排序
            fetch('/menu/update_order/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
                },
                body: JSON.stringify({menu_orders: menuIds})
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 更新排序列显示
                    rows.forEach(function(row, index) {
                        var orderCell = row.querySelector('td:nth-child(6)');
                        orderCell.textContent = index + 1;
                    });
                } else {
                    alert('排序更新失败');
                    location.reload();
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('排序更新失败');
                location.reload();
            });
        }
    });
});
</script>
{% endblock %}
